<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { useRouter,useRoute} from 'vue-router'
import { ElAvatar } from 'element-plus'
import { useUserStore } from '@/stores/user';

const $props = defineProps({
  activeMenu: String || Number,
})


const userStore = useUserStore()
const route= useRoute()

const searchInputShow = computed(()=>!route.path.includes('search'))

const userInfo = computed(()=>userStore.userInfo)

const activeIndex = computed(() => $props.activeMenu)
const searchKeyword = ref('') // 用于存储搜索关键词

// function handleSearch() {
//   console.log('搜索关键词:', searchKeyword.value)
//   // 这里可以添加实际的搜索逻辑，如发送API请求
// }

const navList = [
  {
    name: '主页',
    id: '-1',
    path: '/main/home',
  },
  {
    name: '任务',
    id: '1',
    path: '/main/typePostList',
    isTypePost: true,
  },
  {
    name: '交流',
    id: '0',
    path: '/main/typePostList',
    isTypePost: true,
  },
  {
    name: '附近',
    id: '-2',
    path: '/main/typePostList',
    isTypePost: true,
  },
  {
    name: '关注',
    id: '7',
    path: '/main/typePostList',
    needLogin:true,
    isTypePost: true,
  },
  {
    name: '热门',
    id: '5',
    path: '/main/typePostList',
    isTypePost: true,
  },
  {
    name: '求助',
    id: '2',
    path: '/main/typePostList',
    isTypePost: true,
  },
  {
    name: '聊天',
    id: '8',
    path: '/main/talk/chat',
    needLogin:true
  },
]

const router = useRouter()
const clickHandle = async (item: any) => {
  if (item.isTypePost) {
    router.push(`${item.path}/${item.id}`)
  } else {
    router.push(item.path)
  }
}

const handlGoHome = () => {
  router.push('/main/home')
}

const handleGoPersonalHomePage = () => {
  router.push(`/main/personalHomepage?id=${userInfo.value.uid||'10035'}`)
}

const handleGoSearch=()=>{
 window.open(`/main/search?searchText=${searchKeyword.value}`)
}
</script>

<template>
  <el-header class="py-4 w-full bg-white">
    <div class="flex items-center justify-around">
      <div class="flex items-center justify-between gap-2 cursor-pointer" @click="handlGoHome">
        <ElImage
          src=""
          alt="logo"
          class="h-10 w-10"
        />
        <span class="text-xl text-black">创需平台</span>
      </div>
      <div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          :ellipsis="false"
        >
          <el-menu-item
            v-for="item in navList"
            :index="item.id"
            :key="item.id"
            @click="!item.needLogin?clickHandle(item):()=>{}"
            v-login="!!item.needLogin?()=>clickHandle(item):undefined"
          >
            {{ item.name }}
          </el-menu-item>
        </el-menu>
      </div>

      <div>
        <el-input v-model="searchKeyword" style="width: 240px" size="large" placeholder="发现资源" @keydown.enter="handleGoSearch" v-if="searchInputShow" >
          <template #append >
            <el-button type="primary" :icon="Search" @click="handleGoSearch"  />
          </template>
        </el-input>
      </div>
      <div>
        <el-button type="primary" round v-login="()=>{}" v-nologin-show> 登录 </el-button>
        <ElAvatar :src="userInfo.avatar" @click="handleGoPersonalHomePage" v-login-show />
      </div>
    </div>
    <LoginBox />
  </el-header>
</template>

<style lang="scss">
.el-menu.el-menu--horizontal {
  border: none;
}

.el-menu-demo .el-menu-item:hover {
  color: #409eff !important;
  background-color: #fff !important;
}
</style>
